feat: add Linux system title bar setting option

packages/shared/IpcChannel.ts

@@ -48,6 +48,7 @@ export enum IpcChannel {
 
   App_QuoteToMain = 'app:quote-to-main',
   App_SetDisableHardwareAcceleration = 'app:set-disable-hardware-acceleration',
+  App_SetUseSystemTitleBar = 'app:set-use-system-title-bar',
 
   Notification_Send = 'notification:send',
   Notification_OnClick = 'notification:on-click',

src/main/ipc.ts

@@ -913,6 +913,9 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
   ipcMain.handle(IpcChannel.App_SetDisableHardwareAcceleration, (_, isDisable: boolean) => {
     configManager.setDisableHardwareAcceleration(isDisable)
   })
+  ipcMain.handle(IpcChannel.App_SetUseSystemTitleBar, (_, isActive: boolean) => {
+    configManager.setUseSystemTitleBar(isActive)
+  })
   ipcMain.handle(IpcChannel.TRACE_SAVE_DATA, (_, topicId: string) => saveSpans(topicId))
   ipcMain.handle(IpcChannel.TRACE_GET_DATA, (_, topicId: string, traceId: string, modelName?: string) =>
     getSpans(topicId, traceId, modelName)

src/main/services/ConfigManager.ts

@@ -29,6 +29,7 @@ export enum ConfigKeys {
   SelectionAssistantFilterMode = 'selectionAssistantFilterMode',
   SelectionAssistantFilterList = 'selectionAssistantFilterList',
   DisableHardwareAcceleration = 'disableHardwareAcceleration',
+  UseSystemTitleBar = 'useSystemTitleBar',
   Proxy = 'proxy',
   EnableDeveloperMode = 'enableDeveloperMode',
   ClientId = 'clientId',
@@ -235,6 +236,14 @@ export class ConfigManager {
     this.set(ConfigKeys.DisableHardwareAcceleration, value)
   }
 
+  getUseSystemTitleBar(): boolean {
+    return this.get<boolean>(ConfigKeys.UseSystemTitleBar, false)
+  }
+
+  setUseSystemTitleBar(value: boolean) {
+    this.set(ConfigKeys.UseSystemTitleBar, value)
+  }
+
   setAndNotify(key: string, value: unknown) {
     this.set(key, value, true)
   }

src/main/services/WindowService.ts

@@ -75,7 +75,8 @@ export class WindowService {
             trafficLightPosition: { x: 8, y: 13 }
           }
         : {
-            frame: false // Frameless window for Windows and Linux
+            // On Linux, allow using system title bar if setting is enabled
+            frame: isLinux && configManager.getUseSystemTitleBar() ? true : false
           }),
       backgroundColor: isMac ? undefined : nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF',
       darkTheme: nativeTheme.shouldUseDarkColors,

src/preload/index.ts

@@ -489,6 +489,7 @@ const api = {
   quoteToMainWindow: (text: string) => ipcRenderer.invoke(IpcChannel.App_QuoteToMain, text),
   setDisableHardwareAcceleration: (isDisable: boolean) =>
     ipcRenderer.invoke(IpcChannel.App_SetDisableHardwareAcceleration, isDisable),
+  setUseSystemTitleBar: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetUseSystemTitleBar, isActive),
   trace: {
     saveData: (topicId: string) => ipcRenderer.invoke(IpcChannel.TRACE_SAVE_DATA, topicId),
     getData: (topicId: string, traceId: string, modelName?: string) =>

src/renderer/src/components/Tab/TabContainer.tsx

@@ -2,7 +2,7 @@ import { PlusOutlined } from '@ant-design/icons'
 import { loggerService } from '@logger'
 import { Sortable, useDndReorder } from '@renderer/components/dnd'
 import HorizontalScrollContainer from '@renderer/components/HorizontalScrollContainer'
-import { isMac } from '@renderer/config/constant'
+import { isLinux, isMac, isWin } from '@renderer/config/constant'
 import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useFullscreen } from '@renderer/hooks/useFullscreen'
@@ -314,7 +314,7 @@ const TabsBar = styled.div<{ $isFullscreen: boolean }>`
   align-items: center;
   gap: 5px;
   padding-left: ${({ $isFullscreen }) => (!$isFullscreen && isMac ? 'calc(env(titlebar-area-x) + 4px)' : '15px')};
-  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : '0')};
+  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWin || isLinux ? '8px' : '0')};
   height: var(--navbar-height);
   min-height: ${({ $isFullscreen }) => (!$isFullscreen && isMac ? 'env(titlebar-area-height)' : '')};
   position: relative;

src/renderer/src/components/WindowControls/WindowControls.styled.ts

@@ -1,9 +1,6 @@
 import styled from 'styled-components'
 
 export const WindowControlsContainer = styled.div`
-  position: fixed;
-  top: 0;
-  right: 0;
   display: flex;
   align-items: center;
   height: var(--navbar-height);

src/renderer/src/components/WindowControls/index.tsx

@@ -1,4 +1,5 @@
 import { isLinux, isWin } from '@renderer/config/constant'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { Tooltip } from 'antd'
 import { Minus, Square, X } from 'lucide-react'
 import type { SVGProps } from 'react'
@@ -49,6 +50,7 @@ const DEFAULT_DELAY = 1
 const WindowControls: React.FC = () => {
   const [isMaximized, setIsMaximized] = useState(false)
   const { t } = useTranslation()
+  const { useSystemTitleBar } = useSettings()
 
   useEffect(() => {
     // Check initial maximized state
@@ -67,6 +69,11 @@ const WindowControls: React.FC = () => {
     return null
   }
 
+  // Hide on Linux if using system title bar
+  if (isLinux && useSystemTitleBar) {
+    return null
+  }
+
   const handleMinimize = () => {
     window.api.windowControls.minimize()
   }

src/renderer/src/components/app/Navbar.tsx

@@ -22,12 +22,10 @@ export const Navbar: FC<Props> = ({ children, ...props }) => {
   }
 
   return (
-    <>
-      <NavbarContainer {...props} style={{ backgroundColor }} $isFullScreen={isFullscreen}>
-        {children}
-      </NavbarContainer>
-      {!isTopNavbar && !minappShow && <WindowControls />}
-    </>
+    <NavbarContainer {...props} style={{ backgroundColor }} $isFullScreen={isFullscreen}>
+      {children}
+      {!minappShow && <WindowControls />}
+    </NavbarContainer>
   )
 }
 

src/renderer/src/hooks/useSettings.ts

@@ -18,6 +18,7 @@ import {
   setTopicPosition,
   setTray as _setTray,
   setTrayOnClose,
+  setUseSystemTitleBar as _setUseSystemTitleBar,
   setWindowStyle
 } from '@renderer/store/settings'
 import type { SidebarIcon, ThemeMode, TranslateLanguageCode } from '@renderer/types'
@@ -101,6 +102,10 @@ export function useSettings() {
     setDisableHardwareAcceleration(disableHardwareAcceleration: boolean) {
       dispatch(setDisableHardwareAcceleration(disableHardwareAcceleration))
       window.api.setDisableHardwareAcceleration(disableHardwareAcceleration)
+    },
+    setUseSystemTitleBar(useSystemTitleBar: boolean) {
+      dispatch(_setUseSystemTitleBar(useSystemTitleBar))
+      window.api.setUseSystemTitleBar(useSystemTitleBar)
     }
   }
 }

src/renderer/src/i18n/locales/en-us.json

@@ -4874,6 +4874,13 @@
       "show": "Show Tray Icon",
       "title": "Tray"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "Restart Required"
+      },
+      "title": "Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Reset",
       "title": "Page Zoom"

src/renderer/src/i18n/locales/zh-cn.json

@@ -4874,6 +4874,13 @@
       "show": "显示托盘图标",
       "title": "托盘"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "更改标题栏样式需要重启应用才能生效，是否现在重启？",
+        "title": "需要重启应用"
+      },
+      "title": "使用系统标题栏 (Linux)"
+    },
     "zoom": {
       "reset": "重置",
       "title": "缩放"

src/renderer/src/i18n/locales/zh-tw.json

@@ -4874,6 +4874,13 @@
       "show": "顯示系統匣圖示",
       "title": "系統匣"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "重設",
       "title": "縮放"

src/renderer/src/i18n/translate/de-de.json

@@ -4874,6 +4874,13 @@
       "show": "Tray-Symbol anzeigen",
       "title": "Tray"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Zurücksetzen",
       "title": "Zoom"

src/renderer/src/i18n/translate/el-gr.json

@@ -4874,6 +4874,13 @@
       "show": "Εμφάνιση εικονιδίου συνδρομής",
       "title": "Συνδρομή"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Επαναφορά",
       "title": "Κλίμακα"

src/renderer/src/i18n/translate/es-es.json

@@ -4874,6 +4874,13 @@
       "show": "Mostrar bandera del sistema",
       "title": "Bandera"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Restablecer",
       "title": "Escala"

src/renderer/src/i18n/translate/fr-fr.json

@@ -4874,6 +4874,13 @@
       "show": "Afficher l'icône dans la barre d'état système",
       "title": "Barre d'état système"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Réinitialiser",
       "title": "Zoom"

src/renderer/src/i18n/translate/ja-jp.json

@@ -4874,6 +4874,13 @@
       "show": "トレイアイコンを表示",
       "title": "トレイ"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "リセット",
       "title": "ページズーム"

src/renderer/src/i18n/translate/pt-pt.json

@@ -4874,6 +4874,13 @@
       "show": "Mostrar ícone de bandeja",
       "title": "Tray"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Redefinir",
       "title": "Escala"

src/renderer/src/i18n/translate/ru-ru.json

@@ -4874,6 +4874,13 @@
       "show": "Показать значок в трее",
       "title": "Трей"
     },
+    "use_system_title_bar": {
+      "confirm": {
+        "content": "[to be translated]:Changing the title bar style requires restarting the app to take effect. Do you want to restart now?",
+        "title": "[to be translated]:Restart Required"
+      },
+      "title": "[to be translated]:Use System Title Bar (Linux)"
+    },
     "zoom": {
       "reset": "Сбросить",
       "title": "Масштаб страницы"

src/renderer/src/pages/home/Navbar.tsx

@@ -1,7 +1,6 @@
 import { Navbar, NavbarCenter, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
-import { isLinux, isWin } from '@renderer/config/constant'
 import { modelGenerating } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useShortcut } from '@renderer/hooks/useShortcuts'
@@ -123,7 +122,7 @@ const HeaderNavbar: FC<Props> = ({
           justifyContent: 'flex-end',
           flex: activeTopicOrSession === 'topic' ? 1 : 'none',
           position: 'relative',
-          paddingRight: isWin || isLinux ? '144px' : '15px',
+          paddingRight: '8px',
           minWidth: activeTopicOrSession === 'topic' ? '' : 'auto'
         }}
         className="home-navbar-right">

src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx

@@ -2,10 +2,11 @@ import CodeEditor from '@renderer/components/CodeEditor'
 import { ResetIcon } from '@renderer/components/Icons'
 import { HStack } from '@renderer/components/Layout'
 import TextBadge from '@renderer/components/TextBadge'
-import { isMac, THEME_COLOR_PRESETS } from '@renderer/config/constant'
+import { isLinux, isMac, THEME_COLOR_PRESETS } from '@renderer/config/constant'
 import { DEFAULT_SIDEBAR_ICONS } from '@renderer/config/sidebar'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useNavbarPosition, useSettings } from '@renderer/hooks/useSettings'
+import { useTimer } from '@renderer/hooks/useTimer'
 import useUserTheme from '@renderer/hooks/useUserTheme'
 import { useAppDispatch } from '@renderer/store'
 import type { AssistantIconType } from '@renderer/store/settings'
@@ -68,12 +69,15 @@ const DisplaySettings: FC = () => {
     sidebarIcons,
     setTheme,
     assistantIconType,
-    userTheme
+    userTheme,
+    useSystemTitleBar,
+    setUseSystemTitleBar
   } = useSettings()
   const { navbarPosition, setNavbarPosition } = useNavbarPosition()
   const { theme, settedTheme } = useTheme()
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
+  const { setTimeoutTimer } = useTimer()
   const [currentZoom, setCurrentZoom] = useState(1.0)
   const { setUserTheme } = useUserTheme()
 
@@ -88,6 +92,26 @@ const DisplaySettings: FC = () => {
     [setWindowStyle]
   )
 
+  const handleUseSystemTitleBarChange = (checked: boolean) => {
+    window.modal.confirm({
+      title: t('settings.use_system_title_bar.confirm.title'),
+      content: t('settings.use_system_title_bar.confirm.content'),
+      okText: t('common.confirm'),
+      cancelText: t('common.cancel'),
+      centered: true,
+      onOk() {
+        setUseSystemTitleBar(checked)
+        setTimeoutTimer(
+          'handleUseSystemTitleBarChange',
+          () => {
+            window.api.relaunchApp()
+          },
+          500
+        )
+      }
+    })
+  }
+
   const handleColorPrimaryChange = useCallback(
     (colorHex: string) => {
       setUserTheme({
@@ -245,6 +269,15 @@ const DisplaySettings: FC = () => {
             </SettingRow>
           </>
         )}
+        {isLinux && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.use_system_title_bar.title')}</SettingRowTitle>
+              <Switch checked={useSystemTitleBar} onChange={handleUseSystemTitleBarChange} />
+            </SettingRow>
+          </>
+        )}
       </SettingGroup>
       <SettingGroup theme={theme}>
         <SettingTitle style={{ justifyContent: 'flex-start', gap: 5 }}>