@lobehub/lobehub 2.0.0-next.240 → 2.0.0-next.242

package/src/features/ElectronTitlebar/hooks/useNavigationHistory.ts

@@ -0,0 +1,152 @@
+'use client';
+
+import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import { useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useElectronStore } from '@/store/electron';
+
+import { getRouteMetadata } from '../helpers/routeMetadata';
+
+/**
+ * Hook to manage navigation history in Electron desktop app
+ * Provides browser-like back/forward functionality
+ */
+export const useNavigationHistory = () => {
+  const { t } = useTranslation('electron');
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // Get store state and actions
+  const isNavigatingHistory = useElectronStore((s) => s.isNavigatingHistory);
+  const historyCurrentIndex = useElectronStore((s) => s.historyCurrentIndex);
+  const historyEntries = useElectronStore((s) => s.historyEntries);
+  const currentPageTitle = useElectronStore((s) => s.currentPageTitle);
+  const pushHistory = useElectronStore((s) => s.pushHistory);
+  const replaceHistory = useElectronStore((s) => s.replaceHistory);
+  const setIsNavigatingHistory = useElectronStore((s) => s.setIsNavigatingHistory);
+  const storeGoBack = useElectronStore((s) => s.goBack);
+  const storeGoForward = useElectronStore((s) => s.goForward);
+  const canGoBackFn = useElectronStore((s) => s.canGoBack);
+  const canGoForwardFn = useElectronStore((s) => s.canGoForward);
+  const getCurrentEntry = useElectronStore((s) => s.getCurrentEntry);
+
+  // Track previous location to avoid duplicate entries
+  const prevLocationRef = useRef<string | null>(null);
+
+  // Calculate can go back/forward
+  const canGoBack = historyCurrentIndex > 0;
+  const canGoForward = historyCurrentIndex < historyEntries.length - 1;
+
+  /**
+   * Go back in history
+   */
+  const goBack = useCallback(() => {
+    if (!canGoBackFn()) return;
+
+    const targetEntry = storeGoBack();
+    if (targetEntry) {
+      navigate(targetEntry.url);
+    }
+  }, [canGoBackFn, storeGoBack, navigate]);
+
+  /**
+   * Go forward in history
+   */
+  const goForward = useCallback(() => {
+    if (!canGoForwardFn()) return;
+
+    const targetEntry = storeGoForward();
+    if (targetEntry) {
+      navigate(targetEntry.url);
+    }
+  }, [canGoForwardFn, storeGoForward, navigate]);
+
+  // Listen to route changes and push history
+  useEffect(() => {
+    const currentUrl = location.pathname + location.search;
+
+    // Skip if this is a back/forward navigation
+    if (isNavigatingHistory) {
+      setIsNavigatingHistory(false);
+      prevLocationRef.current = currentUrl;
+      return;
+    }
+
+    // Skip if same as previous location
+    if (prevLocationRef.current === currentUrl) {
+      return;
+    }
+
+    // Skip if same as current entry
+    const currentEntry = getCurrentEntry();
+    if (currentEntry?.url === currentUrl) {
+      prevLocationRef.current = currentUrl;
+      return;
+    }
+
+    // Get metadata for this route
+    const metadata = getRouteMetadata(location.pathname);
+    const presetTitle = t(metadata.titleKey as any) as string;
+
+    // Push history with preset title (will be updated by PageTitle if useDynamicTitle)
+    pushHistory({
+      metadata: {
+        timestamp: Date.now(),
+      },
+      title: presetTitle,
+      url: currentUrl,
+    });
+
+    prevLocationRef.current = currentUrl;
+  }, [
+    location.pathname,
+    location.search,
+    isNavigatingHistory,
+    setIsNavigatingHistory,
+    getCurrentEntry,
+    pushHistory,
+    t,
+  ]);
+
+  // Update current history entry title when PageTitle component updates
+  useEffect(() => {
+    if (!currentPageTitle) return;
+
+    const currentEntry = getCurrentEntry();
+    if (!currentEntry) return;
+
+    // Check if current route supports dynamic title
+    const metadata = getRouteMetadata(location.pathname);
+    if (!metadata.useDynamicTitle) return;
+
+    // Skip if title is already the same
+    if (currentEntry.title === currentPageTitle) return;
+
+    // Update the current history entry with the dynamic title
+    replaceHistory({
+      ...currentEntry,
+      title: currentPageTitle,
+    });
+  }, [currentPageTitle, getCurrentEntry, replaceHistory, location.pathname]);
+
+  // Listen to broadcast events from main process (Electron menu)
+  useWatchBroadcast('historyGoBack', () => {
+    goBack();
+  });
+
+  useWatchBroadcast('historyGoForward', () => {
+    goForward();
+  });
+
+  return {
+    canGoBack,
+    canGoForward,
+    currentEntry: getCurrentEntry(),
+    goBack,
+    goForward,
+    historyEntries,
+    historyIndex: historyCurrentIndex,
+  };
+};

package/src/features/ElectronTitlebar/index.tsx

@@ -1,12 +1,13 @@
 import { Flexbox } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 import { useElectronStore } from '@/store/electron';
 import { electronStylish } from '@/styles/electron';
 import { isMacOS } from '@/utils/platform';
 
 import Connection from './Connection';
+import NavigationBar from './NavigationBar';
 import { UpdateModal } from './UpdateModal';
 import { UpdateNotification } from './UpdateNotification';
 import WinControl from './WinControl';
@@ -25,6 +26,15 @@ const TitleBar = memo(() => {
   useWatchThemeUpdate();
 
   const showWinControl = isAppStateInit && !isMac;
+
+  const padding = useMemo(() => {
+    if (showWinControl) {
+      return '0 12px 0 0';
+    }
+
+    return '0 12px';
+  }, [showWinControl, isMac]);
+
   return (
     <Flexbox
       align={'center'}
@@ -32,12 +42,10 @@ const TitleBar = memo(() => {
       height={TITLE_BAR_HEIGHT}
       horizontal
       justify={'space-between'}
-      paddingInline={showWinControl ? '12px 0' : 12}
-      style={{ minHeight: TITLE_BAR_HEIGHT }}
+      style={{ minHeight: TITLE_BAR_HEIGHT, padding }}
       width={'100%'}
     >
-      <div />
-      <div>{/* TODO */}</div>
+      <NavigationBar />
 
       <Flexbox align={'center'} gap={4} horizontal>
         <Flexbox className={electronStylish.nodrag} gap={8} horizontal>

package/src/features/NavHeader/index.tsx

@@ -2,7 +2,8 @@ import { Flexbox, type FlexboxProps, TooltipGroup } from '@lobehub/ui';
 import { type CSSProperties, type ReactNode, memo } from 'react';
 
 import ToggleLeftPanelButton from '@/features/NavPanel/ToggleLeftPanelButton';
-import { useNavPanel } from '@/features/NavPanel/hooks/useNavPanel';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 export interface NavHeaderProps extends Omit<FlexboxProps, 'children'> {
   children?: ReactNode;
@@ -18,7 +19,8 @@ export interface NavHeaderProps extends Omit<FlexboxProps, 'children'> {
 
 const NavHeader = memo<NavHeaderProps>(
   ({ showTogglePanelButton = true, style, children, left, right, styles, ...rest }) => {
-    const { expand } = useNavPanel();
+    const expand = useGlobalStore(systemStatusSelectors.showLeftPanel);
+
     const noContent = !left && !right;
 
     if (noContent && expand) return;

package/src/features/NavPanel/components/NavPanelDraggable.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { DraggablePanel } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { AnimatePresence, motion } from 'motion/react';
+import { type ReactNode, memo, useMemo, useRef } from 'react';
+
+import { USER_DROPDOWN_ICON_ID } from '@/app/[variants]/(main)/home/_layout/Header/components/User';
+import { isDesktop } from '@/const/version';
+import { TOGGLE_BUTTON_ID } from '@/features/NavPanel/ToggleLeftPanelButton';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { isMacOS } from '@/utils/platform';
+
+import { useNavPanelSizeChangeHandler } from '../hooks/useNavPanel';
+import { BACK_BUTTON_ID } from './BackButton';
+
+const motionVariants = {
+  animate: { opacity: 1, x: 0 },
+  exit: {
+    opacity: 0,
+    x: '-20%',
+  },
+  initial: {
+    opacity: 0,
+    x: 0,
+  },
+  transition: {
+    duration: 0.4,
+    ease: [0.4, 0, 0.2, 1],
+  },
+} as const;
+
+const draggableStyles = createStaticStyles(({ css, cssVar }) => ({
+  content: css`
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+  `,
+  inner: css`
+    position: relative;
+    inset: 0;
+
+    overflow: hidden;
+    flex: 1;
+    flex-direction: column;
+
+    min-width: 240px;
+  `,
+  panel: css`
+    user-select: none;
+    height: 100%;
+    color: ${cssVar.colorTextSecondary};
+    background: ${isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout};
+
+    * {
+      user-select: none;
+    }
+
+    #${TOGGLE_BUTTON_ID} {
+      width: 0 !important;
+      opacity: 0;
+      transition:
+        opacity,
+        width 0.2s ${cssVar.motionEaseOut};
+    }
+
+    #${USER_DROPDOWN_ICON_ID} {
+      width: 0 !important;
+      opacity: 0;
+      transition:
+        opacity,
+        width 0.2s ${cssVar.motionEaseOut};
+    }
+
+    #${BACK_BUTTON_ID} {
+      width: 0 !important;
+      opacity: 0;
+      transition: all 0.2s ${cssVar.motionEaseOut};
+    }
+
+    &:hover {
+      #${TOGGLE_BUTTON_ID} {
+        width: 32px !important;
+        opacity: 1;
+      }
+
+      #${USER_DROPDOWN_ICON_ID} {
+        width: 14px !important;
+        opacity: 1;
+      }
+
+      &:hover {
+        #${BACK_BUTTON_ID} {
+          width: 24px !important;
+          opacity: 1;
+        }
+      }
+    }
+  `,
+}));
+
+interface NavPanelDraggableProps {
+  activeContent: {
+    key: string;
+    node: ReactNode;
+  };
+}
+
+const classNames = {
+  content: draggableStyles.content,
+};
+
+export const NavPanelDraggable = memo<NavPanelDraggableProps>(({ activeContent }) => {
+  const [expand, togglePanel] = useGlobalStore((s) => [
+    systemStatusSelectors.showLeftPanel(s),
+    s.toggleLeftPanel,
+  ]);
+  const handleSizeChange = useNavPanelSizeChangeHandler();
+
+  const defaultWidthRef = useRef(0);
+  if (defaultWidthRef.current === 0) {
+    defaultWidthRef.current = systemStatusSelectors.leftPanelWidth(useGlobalStore.getState());
+  }
+
+  const defaultSize = useMemo(
+    () => ({
+      height: '100%',
+      width: defaultWidthRef.current,
+    }),
+    [defaultWidthRef.current],
+  );
+  const styles = useMemo(
+    () => ({
+      background: isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout,
+      zIndex: 11,
+    }),
+    [isDesktop, isMacOS()],
+  );
+  return (
+    <DraggablePanel
+      className={draggableStyles.panel}
+      classNames={classNames}
+      defaultSize={defaultSize}
+      expand={expand}
+      expandable={false}
+      maxWidth={400}
+      minWidth={240}
+      onExpandChange={togglePanel}
+      onSizeDragging={handleSizeChange}
+      placement="left"
+      showBorder={false}
+      style={styles}
+    >
+      <AnimatePresence initial={false} mode="popLayout">
+        <motion.div
+          animate={motionVariants.animate}
+          className={draggableStyles.inner}
+          exit={motionVariants.exit}
+          initial={motionVariants.initial}
+          key={activeContent.key}
+          transition={motionVariants.transition}
+        >
+          {activeContent.node}
+        </motion.div>
+      </AnimatePresence>
+    </DraggablePanel>
+  );
+});

package/src/features/NavPanel/hooks/useNavPanel.ts

@@ -2,49 +2,25 @@
 
 import { type DraggablePanelProps } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { useCallback, useState } from 'react';
 
+import { useTypeScriptHappyCallback } from '@/hooks/useTypeScriptHappyCallback';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
-export const useNavPanel = () => {
-  const [leftPanelWidth, sessionExpandable, togglePanel, updatePreference] = useGlobalStore((s) => [
-    systemStatusSelectors.leftPanelWidth(s),
-    systemStatusSelectors.showLeftPanel(s),
-    s.toggleLeftPanel,
-    s.updateSystemStatus,
-  ]);
-
-  const [tmpWidth, setWidth] = useState(leftPanelWidth);
-
-  if (tmpWidth !== leftPanelWidth) setWidth(leftPanelWidth);
-
-  const handleSizeChange: DraggablePanelProps['onSizeChange'] = useCallback(
-    (_: any, size: any) => {
-      const width = size?.width;
+export const useNavPanelSizeChangeHandler = (onChange?: (width: number) => void) => {
+  const handleSizeChange: DraggablePanelProps['onSizeChange'] = useTypeScriptHappyCallback(
+    (_, size) => {
+      const width = typeof size?.width === 'string' ? Number.parseInt(size.width) : size?.width;
       if (!width || width < 64) return;
+      const s = useGlobalStore.getState();
+      const leftPanelWidth = systemStatusSelectors.leftPanelWidth(s);
+      const updatePreference = s.updateSystemStatus;
       if (isEqual(width, leftPanelWidth)) return;
-      setWidth(width);
+      onChange?.(width);
       updatePreference({ leftPanelWidth: width });
     },
-    [sessionExpandable, leftPanelWidth, updatePreference],
+    [],
   );
 
-  const openPanel = useCallback(() => {
-    togglePanel(true);
-  }, [togglePanel]);
-
-  const closePanel = useCallback(() => {
-    togglePanel(false);
-  }, [togglePanel]);
-
-  return {
-    closePanel,
-    defaultWidth: tmpWidth,
-    expand: sessionExpandable,
-    handleSizeChange,
-    openPanel,
-    togglePanel,
-    width: leftPanelWidth,
-  };
+  return handleSizeChange;
 };

package/src/features/NavPanel/index.tsx

@@ -1,8 +1,5 @@
 'use client';
 
-import { DraggablePanel } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
-import { AnimatePresence, motion } from 'motion/react';
 import {
   type PropsWithChildren,
   type ReactNode,
@@ -11,14 +8,8 @@ import {
   useSyncExternalStore,
 } from 'react';
 
-import { USER_DROPDOWN_ICON_ID } from '@/app/[variants]/(main)/home/_layout/Header/components/User';
-import { isDesktop } from '@/const/version';
-import { TOGGLE_BUTTON_ID } from '@/features/NavPanel/ToggleLeftPanelButton';
-import { isMacOS } from '@/utils/platform';
-
 import Sidebar from '../../app/[variants]/(main)/home/_layout/Sidebar';
-import { BACK_BUTTON_ID } from './components/BackButton';
-import { useNavPanel } from './hooks/useNavPanel';
+import { NavPanelDraggable } from './components/NavPanelDraggable';
 
 export const NAV_PANEL_RIGHT_DRAWER_ID = 'nav-panel-drawer';
 
@@ -41,82 +32,7 @@ const setNavPanelSnapshot = (snapshot: NavPanelSnapshot) => {
   listeners.forEach((listener) => listener());
 };
 
-export const styles = createStaticStyles(({ css, cssVar }) => ({
-  content: css`
-    position: relative;
-
-    overflow: hidden;
-    display: flex;
-
-    height: 100%;
-    min-height: 100%;
-    max-height: 100%;
-  `,
-  inner: css`
-    position: relative;
-    inset: 0;
-
-    overflow: hidden;
-    flex: 1;
-    flex-direction: column;
-
-    min-width: 240px;
-  `,
-  panel: css`
-    user-select: none;
-    height: 100%;
-    color: ${cssVar.colorTextSecondary};
-    background: ${isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout};
-
-    * {
-      user-select: none;
-    }
-
-    #${TOGGLE_BUTTON_ID} {
-      width: 0 !important;
-      opacity: 0;
-      transition:
-        opacity,
-        width 0.2s ${cssVar.motionEaseOut};
-    }
-
-    #${USER_DROPDOWN_ICON_ID} {
-      width: 0 !important;
-      opacity: 0;
-      transition:
-        opacity,
-        width 0.2s ${cssVar.motionEaseOut};
-    }
-
-    #${BACK_BUTTON_ID} {
-      width: 0 !important;
-      opacity: 0;
-      transition: all 0.2s ${cssVar.motionEaseOut};
-    }
-
-    &:hover {
-      #${TOGGLE_BUTTON_ID} {
-        width: 32px !important;
-        opacity: 1;
-      }
-
-      #${USER_DROPDOWN_ICON_ID} {
-        width: 14px !important;
-        opacity: 1;
-      }
-
-      &:hover {
-        #${BACK_BUTTON_ID} {
-          width: 24px !important;
-          opacity: 1;
-        }
-      }
-    }
-  `,
-}));
-
 const NavPanel = memo(() => {
-  const { expand, handleSizeChange, width, togglePanel } = useNavPanel();
   const panelContent = useSyncExternalStore(
     subscribeNavPanel,
     getNavPanelSnapshot,
@@ -128,47 +44,7 @@ const NavPanel = memo(() => {
 
   return (
     <>
-      <DraggablePanel
-        className={styles.panel}
-        classNames={{
-          content: styles.content,
-        }}
-        defaultSize={{ height: '100%', width }}
-        expand={expand}
-        expandable={false}
-        maxWidth={400}
-        minWidth={240}
-        onExpandChange={(expand) => togglePanel(expand)}
-        onSizeChange={handleSizeChange}
-        placement="left"
-        showBorder={false}
-        style={{
-          background: isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout,
-          zIndex: 11,
-        }}
-      >
-        <AnimatePresence initial={false} mode="popLayout">
-          <motion.div
-            animate={{ opacity: 1, x: 0 }}
-            className={styles.inner}
-            exit={{
-              opacity: 0,
-              x: '-20%',
-            }}
-            initial={{
-              opacity: 0,
-              x: 0,
-            }}
-            key={activeContent.key}
-            transition={{
-              duration: 0.4,
-              ease: [0.4, 0, 0.2, 1],
-            }}
-          >
-            {activeContent.node}
-          </motion.div>
-        </AnimatePresence>
-      </DraggablePanel>
+      <NavPanelDraggable activeContent={activeContent} />
       <div
         id={NAV_PANEL_RIGHT_DRAWER_ID}
         style={{

package/src/hooks/useTypeScriptHappyCallback.ts

@@ -0,0 +1,7 @@
+import type { DependencyList } from 'react';
+import { useCallback } from 'react';
+
+export const useTypeScriptHappyCallback: <Args extends unknown[], R>(
+  fn: (...args: Args) => R,
+  deps: DependencyList,
+) => (...args: Args) => R = useCallback;

package/src/locales/default/electron.ts

@@ -1,4 +1,28 @@
 export default {
+  'navigation.chat': 'Chat',
+  'navigation.discover': 'Discover',
+  'navigation.discoverAssistants': 'Discover Assistants',
+  'navigation.discoverMcp': 'Discover MCP',
+  'navigation.discoverModels': 'Discover Models',
+  'navigation.discoverProviders': 'Discover Providers',
+  'navigation.group': 'Group',
+  'navigation.groupChat': 'Group Chat',
+  'navigation.home': 'Home',
+  'navigation.image': 'Image',
+  'navigation.knowledgeBase': 'Knowledge Base',
+  'navigation.lobehub': 'LobeHub',
+  'navigation.memory': 'Memory',
+  'navigation.memoryContexts': 'Memory - Contexts',
+  'navigation.memoryExperiences': 'Memory - Experiences',
+  'navigation.memoryIdentities': 'Memory - Identities',
+  'navigation.memoryPreferences': 'Memory - Preferences',
+  'navigation.onboarding': 'Onboarding',
+  'navigation.page': 'Page',
+  'navigation.pages': 'Pages',
+  'navigation.provider': 'Provider',
+  'navigation.recentView': 'Recent pages',
+  'navigation.resources': 'Resources',
+  'navigation.settings': 'Settings',
   'notification.finishChatGeneration': 'AI message generation completed',
   'proxy.auth': 'Authentication Required',
   'proxy.authDesc': 'If the proxy server requires a username and password',

package/src/locales/default/subscription.ts

@@ -132,10 +132,9 @@ export default {
     'Your {{plan}} computing credits have been exhausted. Upgrade now to get more credits.',
   'limitation.limited.descUltimate':
     'Your {{plan}} computing credits have been exhausted. Please top up credits to continue.',
-  'limitation.limited.referralTip':
-    'Invite new users to register, and you and your friend will each receive {{reward}}M credits',
+  'limitation.limited.referralTip': 'Invite friends, both get {{reward}}M',
   'limitation.limited.title': 'Computing Credits Exhausted',
-  'limitation.limited.topup': 'Top Up Credits',
+  'limitation.limited.topup': 'Top-Up Credits',
   'limitation.limited.upgrade': 'Upgrade to Higher Plan',
   'limitation.providers.lock.addNew': 'Subscribe now to create custom AI providers',
   'limitation.providers.lock.enableProvider': 'Subscribe now to enable this AI provider',