♻️ refactor(desktop): unify TITLE_BAR_HEIGHT constant to desktop-bridge (#11496)

* ♻️ refactor(desktop): unify TITLE_BAR_HEIGHT constant to desktop-bridge

- Move TITLE_BAR_HEIGHT constant (38) to @lobechat/desktop-bridge package
- Update all references to import directly from the shared package
- Remove duplicate const.ts file from ElectronTitlebar
- Ensure consistency between main process and renderer process

* ✅ test(desktop): update WindowThemeManager test for new TITLE_BAR_HEIGHT

- Update mock to use @lobechat/desktop-bridge instead of @/const/theme
- Update expected height values from 32 to 38

* 🔧 fix(desktop): adjust TITLE_BAR_HEIGHT to prevent container border blocking

- Decrease TITLE_BAR_HEIGHT by 2px to avoid blocking the container border edge in WindowThemeManager.
- Update related test to reflect the new height adjustment.

Signed-off-by: Innei <tukon479@gmail.com>

* 🔧 fix(desktop): further adjust TITLE_BAR_HEIGHT in tests

- Decrease TITLE_BAR_HEIGHT in WindowThemeManager tests from 38px to 36px to maintain consistency with recent changes.
- Update all relevant test cases to reflect the new height.

Signed-off-by: Innei <tukon479@gmail.com>

---------

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/src/main/const/theme.ts

@@ -4,8 +4,5 @@ export const BACKGROUND_LIGHT = '#f8f8f8';
 export const SYMBOL_COLOR_DARK = '#ffffff80';
 export const SYMBOL_COLOR_LIGHT = '#00000080';
 
-// Window dimensions and constraints
-export const TITLE_BAR_HEIGHT = 29;
-
 // Default window configuration
 export const THEME_CHANGE_DELAY = 100;

apps/desktop/src/main/core/browser/Browser.ts

@@ -1,3 +1,4 @@
+import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { MainBroadcastEventKey, MainBroadcastParams } from '@lobechat/electron-client-ipc';
 import {
   BrowserWindow,
@@ -12,7 +13,6 @@ import { join } from 'node:path';
 import { preloadDir, resourcesDir } from '@/const/dir';
 import { isMac } from '@/const/env';
 import { ELECTRON_BE_PROTOCOL_SCHEME } from '@/const/protocol';
-import { TITLE_BAR_HEIGHT } from '@/const/theme';
 import RemoteServerConfigCtr from '@/controllers/RemoteServerConfigCtr';
 import { backendProxyProtocolManager } from '@/core/infrastructure/BackendProxyProtocolManager';
 import { setResponseHeader } from '@/utils/http-headers';

apps/desktop/src/main/core/browser/WindowThemeManager.ts

@@ -1,3 +1,4 @@
+import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { BrowserWindow, nativeTheme } from 'electron';
 import { join } from 'node:path';
 
@@ -9,7 +10,6 @@ import {
   SYMBOL_COLOR_DARK,
   SYMBOL_COLOR_LIGHT,
   THEME_CHANGE_DELAY,
-  TITLE_BAR_HEIGHT,
 } from '@/const/theme';
 import { createLogger } from '@/utils/logger';
 
@@ -91,7 +91,8 @@ export class WindowThemeManager {
       icon: isDev ? join(buildDir, 'icon-dev.ico') : undefined,
       titleBarOverlay: {
         color: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
-        height: TITLE_BAR_HEIGHT,
+        // Reduce 2px to prevent blocking the container border edge
+        height: TITLE_BAR_HEIGHT - 2,
         symbolColor: isDarkMode ? SYMBOL_COLOR_DARK : SYMBOL_COLOR_LIGHT,
       },
       titleBarStyle: 'hidden',

apps/desktop/src/main/core/browser/__tests__/Browser.test.ts

@@ -108,7 +108,6 @@ vi.mock('@/const/theme', () => ({
   SYMBOL_COLOR_DARK: '#ffffff',
   SYMBOL_COLOR_LIGHT: '#000000',
   THEME_CHANGE_DELAY: 0,
-  TITLE_BAR_HEIGHT: 32,
 }));
 
 describe('Browser', () => {

apps/desktop/src/main/core/browser/__tests__/WindowThemeManager.test.ts

@@ -38,13 +38,16 @@ vi.mock('@/const/env', () => ({
   isWindows: true,
 }));
 
+vi.mock('@lobechat/desktop-bridge', () => ({
+  TITLE_BAR_HEIGHT: 38,
+}));
+
 vi.mock('@/const/theme', () => ({
   BACKGROUND_DARK: '#1a1a1a',
   BACKGROUND_LIGHT: '#ffffff',
   SYMBOL_COLOR_DARK: '#ffffff',
   SYMBOL_COLOR_LIGHT: '#000000',
   THEME_CHANGE_DELAY: 0,
-  TITLE_BAR_HEIGHT: 32,
 }));
 
 describe('WindowThemeManager', () => {
@@ -89,7 +92,7 @@ describe('WindowThemeManager', () => {
         icon: undefined,
         titleBarOverlay: {
           color: '#1a1a1a',
-          height: 32,
+          height: 36,
           symbolColor: '#ffffff',
         },
         titleBarStyle: 'hidden',
@@ -106,7 +109,7 @@ describe('WindowThemeManager', () => {
         icon: undefined,
         titleBarOverlay: {
           color: '#ffffff',
-          height: 32,
+          height: 36,
           symbolColor: '#000000',
         },
         titleBarStyle: 'hidden',
@@ -183,7 +186,7 @@ describe('WindowThemeManager', () => {
       expect(mockBrowserWindow.setBackgroundColor).toHaveBeenCalledWith('#1a1a1a');
       expect(mockBrowserWindow.setTitleBarOverlay).toHaveBeenCalledWith({
         color: '#1a1a1a',
-        height: 32,
+        height: 36,
         symbolColor: '#ffffff',
       });
     });
@@ -195,7 +198,7 @@ describe('WindowThemeManager', () => {
       expect(mockBrowserWindow.setBackgroundColor).toHaveBeenCalledWith('#ffffff');
       expect(mockBrowserWindow.setTitleBarOverlay).toHaveBeenCalledWith({
         color: '#ffffff',
-        height: 32,
+        height: 36,
         symbolColor: '#000000',
       });
     });

packages/desktop-bridge/src/index.ts

@@ -7,3 +7,6 @@ export {
   locales,
   RouteVariants,
 } from './routeVariants';
+
+// Desktop window constants
+export const TITLE_BAR_HEIGHT = 38;

src/features/ElectronTitlebar/SimpleTitleBar.tsx

@@ -1,13 +1,12 @@
 'use client';
 
+import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { Flexbox } from '@lobehub/ui';
 import { type FC } from 'react';
 
 import { ProductLogo } from '@/components/Branding/ProductLogo';
 import { electronStylish } from '@/styles/electron';
 
-import { TITLE_BAR_HEIGHT } from './const';
-
 /**
  * A simple, minimal TitleBar for Electron windows.
  * Provides draggable area without business logic (navigation, updates, etc.)

src/features/ElectronTitlebar/const.ts

@@ -1 +0,0 @@
-export const TITLE_BAR_HEIGHT = 30;

src/features/ElectronTitlebar/index.tsx

@@ -1,3 +1,4 @@
+import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { Flexbox } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { memo, useMemo } from 'react';
@@ -11,7 +12,6 @@ import NavigationBar from './NavigationBar';
 import { UpdateModal } from './UpdateModal';
 import { UpdateNotification } from './UpdateNotification';
 import WinControl from './WinControl';
-import { TITLE_BAR_HEIGHT } from './const';
 import { useWatchThemeUpdate } from './hooks/useWatchThemeUpdate';
 
 const isMac = isMacOS();
@@ -66,5 +66,5 @@ const TitleBar = memo(() => {
 
 export default TitleBar;
 
-export { TITLE_BAR_HEIGHT } from './const';
 export { default as SimpleTitleBar } from './SimpleTitleBar';
+export { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';