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

package/src/features/ElectronTitlebar/helpers/routeMetadata.ts

@@ -0,0 +1,214 @@
+/**
+ * Route metadata mapping for navigation history
+ * Provides title and icon information based on route path
+ */
+import {
+  Brain,
+  Circle,
+  Compass,
+  Database,
+  FileText,
+  Home,
+  Image,
+  type LucideIcon,
+  MessageSquare,
+  Rocket,
+  Settings,
+  Users,
+} from 'lucide-react';
+
+export interface RouteMetadata {
+  icon?: LucideIcon;
+  /** i18n key for the title (namespace: electron) */
+  titleKey: string;
+  /** Whether this route should use document.title for more specific title */
+  useDynamicTitle?: boolean;
+}
+
+interface RoutePattern {
+  icon?: LucideIcon;
+  test: (pathname: string) => boolean;
+  /** i18n key for the title (namespace: electron) */
+  titleKey: string;
+  /** Whether this route should use document.title for more specific title */
+  useDynamicTitle?: boolean;
+}
+
+/**
+ * Route patterns ordered by specificity (most specific first)
+ */
+const routePatterns: RoutePattern[] = [
+  // Settings routes
+  {
+    icon: Settings,
+    test: (p) => p.startsWith('/settings/provider'),
+    titleKey: 'navigation.provider',
+  },
+  {
+    icon: Settings,
+    test: (p) => p.startsWith('/settings'),
+    titleKey: 'navigation.settings',
+  },
+
+  // Agent/Chat routes - use dynamic title for specific chat names
+  {
+    icon: MessageSquare,
+    test: (p) => p.startsWith('/agent/'),
+    titleKey: 'navigation.chat',
+    useDynamicTitle: true,
+  },
+  {
+    icon: MessageSquare,
+    test: (p) => p === '/agent',
+    titleKey: 'navigation.chat',
+  },
+
+  // Group routes - use dynamic title for specific group names
+  {
+    icon: Users,
+    test: (p) => p.startsWith('/group/'),
+    titleKey: 'navigation.groupChat',
+    useDynamicTitle: true,
+  },
+  {
+    icon: Users,
+    test: (p) => p === '/group',
+    titleKey: 'navigation.group',
+  },
+
+  // Community/Discover routes
+  {
+    icon: Compass,
+    test: (p) => p.startsWith('/community/assistant'),
+    titleKey: 'navigation.discoverAssistants',
+  },
+  {
+    icon: Compass,
+    test: (p) => p.startsWith('/community/model'),
+    titleKey: 'navigation.discoverModels',
+  },
+  {
+    icon: Compass,
+    test: (p) => p.startsWith('/community/provider'),
+    titleKey: 'navigation.discoverProviders',
+  },
+  {
+    icon: Compass,
+    test: (p) => p.startsWith('/community/mcp'),
+    titleKey: 'navigation.discoverMcp',
+  },
+  {
+    icon: Compass,
+    test: (p) => p.startsWith('/community'),
+    titleKey: 'navigation.discover',
+  },
+
+  // Resource/Knowledge routes
+  {
+    icon: Database,
+    test: (p) => p.startsWith('/resource/library'),
+    titleKey: 'navigation.knowledgeBase',
+  },
+  {
+    icon: Database,
+    test: (p) => p.startsWith('/resource'),
+    titleKey: 'navigation.resources',
+  },
+
+  // Memory routes
+  {
+    icon: Brain,
+    test: (p) => p.startsWith('/memory/identities'),
+    titleKey: 'navigation.memoryIdentities',
+  },
+  {
+    icon: Brain,
+    test: (p) => p.startsWith('/memory/contexts'),
+    titleKey: 'navigation.memoryContexts',
+  },
+  {
+    icon: Brain,
+    test: (p) => p.startsWith('/memory/preferences'),
+    titleKey: 'navigation.memoryPreferences',
+  },
+  {
+    icon: Brain,
+    test: (p) => p.startsWith('/memory/experiences'),
+    titleKey: 'navigation.memoryExperiences',
+  },
+  {
+    icon: Brain,
+    test: (p) => p.startsWith('/memory'),
+    titleKey: 'navigation.memory',
+  },
+
+  // Image routes
+  {
+    icon: Image,
+    test: (p) => p.startsWith('/image'),
+    titleKey: 'navigation.image',
+  },
+
+  // Page routes - use dynamic title for specific page names
+  {
+    icon: FileText,
+    test: (p) => p.startsWith('/page/'),
+    titleKey: 'navigation.page',
+    useDynamicTitle: true,
+  },
+  {
+    icon: FileText,
+    test: (p) => p === '/page',
+    titleKey: 'navigation.pages',
+  },
+
+  // Onboarding
+  {
+    icon: Rocket,
+    test: (p) => p.startsWith('/desktop-onboarding') || p.startsWith('/onboarding'),
+    titleKey: 'navigation.onboarding',
+  },
+
+  // Home (default)
+  {
+    icon: Home,
+    test: (p) => p === '/' || p === '',
+    titleKey: 'navigation.home',
+  },
+];
+
+/**
+ * Get route metadata based on pathname
+ * @param pathname - The current route pathname
+ * @returns Route metadata with titleKey, icon, and useDynamicTitle flag
+ */
+export const getRouteMetadata = (pathname: string): RouteMetadata => {
+  // Find the first matching pattern
+  for (const pattern of routePatterns) {
+    if (pattern.test(pathname)) {
+      return {
+        icon: pattern.icon,
+        titleKey: pattern.titleKey,
+        useDynamicTitle: pattern.useDynamicTitle,
+      };
+    }
+  }
+
+  // Default fallback
+  return {
+    icon: Circle,
+    titleKey: 'navigation.lobehub',
+  };
+};
+
+/**
+ * Get route icon based on pathname or URL
+ * @param url - The route URL (may include query string)
+ * @returns LucideIcon component or undefined
+ */
+export const getRouteIcon = (url: string): LucideIcon | undefined => {
+  // Extract pathname from URL
+  const pathname = url.split('?')[0];
+  const metadata = getRouteMetadata(pathname);
+  return metadata.icon;
+};

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;
 };