@lobehub/lobehub 2.0.0-next.286 → 2.0.0-next.287

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+## [Version 2.0.0-next.287](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.286...v2.0.0-next.287)
+
+<sup>Released on **2026-01-14**</sup>
+
+#### ♻ Code Refactoring
+
+- **desktop**: Unify TITLE_BAR_HEIGHT constant to desktop-bridge.
+
+#### 🐛 Bug Fixes
+
+- **desktop**: Return OFFICIAL_URL in cloud mode for remoteServerUrl selector.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **desktop**: Unify TITLE_BAR_HEIGHT constant to desktop-bridge, closes [#11496](https://github.com/lobehub/lobe-chat/issues/11496) ([e7739e5](https://github.com/lobehub/lobe-chat/commit/e7739e5))
+
+#### What's fixed
+
+- **desktop**: Return OFFICIAL_URL in cloud mode for remoteServerUrl selector, closes [#11502](https://github.com/lobehub/lobe-chat/issues/11502) ([1d11fac](https://github.com/lobehub/lobe-chat/commit/1d11fac))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.286](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.285...v2.0.0-next.286)
 
 <sup>Released on **2026-01-14**</sup>

package/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;

package/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';

package/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',

package/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', () => {

package/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',
       });
     });

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2026-01-14",
+    "version": "2.0.0-next.287"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.286",
+  "version": "2.0.0-next.287",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/desktop-bridge/src/index.ts

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

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -26,6 +26,8 @@ import {
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useElectronStore } from '@/store/electron';
+import { electronSyncSelectors } from '@/store/electron/selectors';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
@@ -63,13 +65,24 @@ export const useCategory = () => {
     userProfileSelectors.userAvatar(s),
     userProfileSelectors.nickName(s),
   ]);
+  const remoteServerUrl = useElectronStore(electronSyncSelectors.remoteServerUrl);
+
+  // Process avatar URL for desktop environment
+  const avatarUrl = useMemo(() => {
+    if (!avatar) return undefined;
+    if (isDesktop && avatar.startsWith('/') && remoteServerUrl) {
+      return remoteServerUrl + avatar;
+    }
+    return avatar;
+  }, [avatar, remoteServerUrl]);
+
   const categoryGroups: CategoryGroup[] = useMemo(() => {
     const groups: CategoryGroup[] = [];
 
     // 个人资料组 - Profile 相关设置
     const profileItems: CategoryItem[] = [
       {
-        icon: avatar ? <Avatar avatar={avatar} shape={'square'} size={26} /> : UserCircle,
+        icon: avatarUrl ? <Avatar avatar={avatarUrl} shape={'square'} size={26} /> : UserCircle,
         key: SettingsTabs.Profile,
         label: username ? username : tAuth('tab.profile'),
       },
@@ -227,7 +240,7 @@ export const useCategory = () => {
     showAiImage,
     showApiKeyManage,
     isLoginWithClerk,
-    avatar,
+    avatarUrl,
     username,
   ]);
 

package/src/features/ElectronTitlebar/Connection/ConnectionMode.tsx

@@ -82,12 +82,12 @@ const ConnectionMode = memo<ConnectionModeProps>(({ setWaiting }) => {
 
   const connect = useElectronStore((s) => s.connectRemoteServer);
   const storageMode = useElectronStore(electronSyncSelectors.storageMode);
-  const remoteServerUrl = useElectronStore(electronSyncSelectors.remoteServerUrl);
+  const rawRemoteServerUrl = useElectronStore(electronSyncSelectors.rawRemoteServerUrl);
 
   const [selectedOption, setSelectedOption] = useState<RemoteStorageMode>(
     storageMode === StorageModeEnum.SelfHost ? StorageModeEnum.SelfHost : StorageModeEnum.Cloud,
   );
-  const [selfHostedUrl, setSelfHostedUrl] = useState(remoteServerUrl);
+  const [selfHostedUrl, setSelfHostedUrl] = useState(rawRemoteServerUrl);
 
   const validateUrl = useCallback((url: string) => {
     if (!url) {

package/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.)

package/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';

package/src/hooks/useUserAvatar.test.ts

@@ -19,6 +19,7 @@ vi.mock('@lobechat/const', async (importOriginal) => {
       return mockIsDesktop;
     },
     DEFAULT_USER_AVATAR: 'default-avatar.png',
+    OFFICIAL_URL: 'https://app.lobehub.com',
   };
 });
 
@@ -77,7 +78,7 @@ describe('useUserAvatar', () => {
     expect(result.current).toBe(mockAvatar);
   });
 
-  it('should prepend remote server URL when avatar starts with / in desktop environment', () => {
+  it('should prepend remote server URL when avatar starts with / in desktop environment (selfHost mode)', () => {
     mockIsDesktop = true;
     const mockAvatar = '/api/avatar.png';
     const mockServerUrl = 'https://server.com';
@@ -85,7 +86,7 @@ describe('useUserAvatar', () => {
     act(() => {
       useUserStore.setState({ user: { avatar: mockAvatar } as any });
       useElectronStore.setState({
-        dataSyncConfig: { remoteServerUrl: mockServerUrl, storageMode: 'cloud' },
+        dataSyncConfig: { remoteServerUrl: mockServerUrl, storageMode: 'selfHost' },
       });
     });
 
@@ -102,7 +103,7 @@ describe('useUserAvatar', () => {
     act(() => {
       useUserStore.setState({ user: { avatar: mockAvatar } as any });
       useElectronStore.setState({
-        dataSyncConfig: { remoteServerUrl: mockServerUrl, storageMode: 'cloud' },
+        dataSyncConfig: { remoteServerUrl: mockServerUrl, storageMode: 'selfHost' },
       });
     });
 
@@ -111,7 +112,7 @@ describe('useUserAvatar', () => {
     expect(result.current).toBe(mockAvatar);
   });
 
-  it('should handle empty remote server URL in desktop environment', () => {
+  it('should use OFFICIAL_URL when storageMode is cloud in desktop environment', () => {
     mockIsDesktop = true;
     const mockAvatar = '/api/avatar.png';
 
@@ -124,6 +125,24 @@ describe('useUserAvatar', () => {
 
     const { result } = renderHook(() => useUserAvatar());
 
+    // In cloud mode, selector returns OFFICIAL_URL regardless of remoteServerUrl config
+    expect(result.current).toBe('https://app.lobehub.com/api/avatar.png');
+  });
+
+  it('should return original avatar when storageMode is selfHost but no URL configured', () => {
+    mockIsDesktop = true;
+    const mockAvatar = '/api/avatar.png';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+      useElectronStore.setState({
+        dataSyncConfig: { remoteServerUrl: '', storageMode: 'selfHost' },
+      });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    // In selfHost mode with empty URL, avatar is not prepended
     expect(result.current).toBe(mockAvatar);
   });
 });

package/src/store/electron/selectors/sync.ts

@@ -1,12 +1,28 @@
+import { OFFICIAL_URL } from '@lobechat/const';
+
 import { type ElectronState } from '../initialState';
 
 const isSyncActive = (s: ElectronState) => s.dataSyncConfig.active;
 
 const storageMode = (s: ElectronState) => s.dataSyncConfig.storageMode;
-const remoteServerUrl = (s: ElectronState) => s.dataSyncConfig.remoteServerUrl || '';
+
+/**
+ * Returns the effective remote server URL based on storage mode:
+ * - Cloud mode: returns OFFICIAL_URL
+ * - SelfHost mode: returns the configured remoteServerUrl
+ */
+const remoteServerUrl = (s: ElectronState) =>
+  s.dataSyncConfig.storageMode === 'cloud' ? OFFICIAL_URL : s.dataSyncConfig.remoteServerUrl || '';
+
+/**
+ * Returns the raw remoteServerUrl from config without transformation.
+ * Use this when you need the original configured value (e.g., for editing forms).
+ */
+const rawRemoteServerUrl = (s: ElectronState) => s.dataSyncConfig.remoteServerUrl || '';
 
 export const electronSyncSelectors = {
   isSyncActive,
+  rawRemoteServerUrl,
   remoteServerUrl,
   storageMode,
 };

package/src/features/ElectronTitlebar/const.ts

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