@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.74

package/src/app/[variants]/(main)/image/_layout/Desktop/index.tsx

@@ -1,3 +1,4 @@
+import { Outlet } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import ImagePanel from '@/features/ImageSidePanel';
@@ -7,7 +8,7 @@ import { LayoutProps } from '../type';
 import Container from './Container';
 import RegisterHotkeys from './RegisterHotkeys';
 
-const Layout = ({ children, menu, topic }: LayoutProps) => {
+const Layout = ({ menu, topic }: Omit<LayoutProps, 'children'>) => {
   return (
     <>
       <Flexbox
@@ -17,7 +18,9 @@ const Layout = ({ children, menu, topic }: LayoutProps) => {
         width={'100%'}
       >
         <ImagePanel>{menu}</ImagePanel>
-        <Container>{children}</Container>
+        <Container>
+          <Outlet />
+        </Container>
         <ImageTopicPanel>{topic}</ImageTopicPanel>
       </Flexbox>
       <RegisterHotkeys />

package/src/app/[variants]/(main)/image/_layout/DesktopWrapper.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+import Menu from '../@menu/default';
+import Topic from '../@topic/default';
+import Desktop from './Desktop';
+
+const DesktopImageWrapper = memo(() => {
+  return <Desktop menu={<Menu />} topic={<Topic />} />;
+});
+
+DesktopImageWrapper.displayName = 'DesktopImageWrapper';
+
+export default DesktopImageWrapper;

package/src/app/[variants]/(main)/image/_layout/Mobile/index.tsx

@@ -1,10 +1,12 @@
+import { Outlet } from 'react-router-dom';
+
 import NProgress from '@/components/NProgress';
 
 const Layout = () => {
   return (
     <>
       <NProgress />
-      <h2>Coming Soon!</h2>
+      <Outlet />
     </>
   );
 };

package/src/app/[variants]/(main)/image/features/ImageWorkspace/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useImageStore } from '@/store/image';
 
 import Content from './Content';

package/src/app/[variants]/(main)/image/index.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Suspense, memo } from 'react';
+
+import ImageWorkspace from './features/ImageWorkspace';
+import SkeletonList from './features/ImageWorkspace/SkeletonList';
+
+const DesktopImagePage = memo(() => {
+  return (
+    <Suspense fallback={<SkeletonList />}>
+      <ImageWorkspace />
+    </Suspense>
+  );
+});
+
+DesktopImagePage.displayName = 'DesktopImagePage';
+
+export default DesktopImagePage;

package/src/app/[variants]/(main)/knowledge/_layout/Desktop.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { App } from 'antd';
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+const DesktopKnowledgeLayout = memo(() => {
+  return (
+    <App style={{ display: 'flex', flex: 1, height: '100%' }}>
+      <Outlet />
+    </App>
+  );
+});
+
+DesktopKnowledgeLayout.displayName = 'DesktopKnowledgeLayout';
+
+export default DesktopKnowledgeLayout;

package/src/app/[variants]/(main)/knowledge/_layout/Mobile.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { App } from 'antd';
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+const MobileKnowledgeLayout = memo(() => {
+  return (
+    <App style={{ display: 'flex', flex: 1, height: '100%' }}>
+      <Outlet />
+    </App>
+  );
+});
+
+MobileKnowledgeLayout.displayName = 'MobileKnowledgeLayout';
+
+export default MobileKnowledgeLayout;

package/src/app/[variants]/(main)/knowledge/components/KnowledgeBaseItem/index.tsx

@@ -45,7 +45,7 @@ const KnowledgeBaseItem = memo<KnowledgeBaseItemProps>(({ name, active, id }) =>
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`/bases/${id}`);
+    navigate(`/knowledge/bases/${id}`);
   };
 
   return (

package/src/app/[variants]/(main)/knowledge/components/modal/ModalPageClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import FileDetail from './FileDetail';
 import FilePreview from './FilePreview';
@@ -12,15 +12,15 @@ interface ModalPageClientProps {
 }
 
 const ModalPageClient = ({ id }: ModalPageClientProps) => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const handleClose = useCallback(() => {
     if (typeof window === 'undefined') return;
 
     const { pathname, search } = window.location;
     const basePath = pathname.replace(/\/modal\/?$/, '');
 
-    router.replace(`${basePath || '/'}${search}`);
-  }, [router]);
+    navigate(`${basePath || '/'}${search}`, { replace: true });
+  }, [navigate]);
 
   return (
     <FullscreenModal detail={<FileDetail id={id} />} onClose={handleClose}>

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/index.tsx

@@ -2,8 +2,9 @@
 
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useParams } from 'react-router-dom';
+import { useLoaderData } from 'react-router-dom';
 
+import type { IdParams } from '@/app/[variants]/loaders/routeParams';
 import FileModalQueryRoute from '@/app/[variants]/(main)/knowledge/shared/FileModalQueryRoute';
 import { useSetFileModalId } from '@/app/[variants]/(main)/knowledge/shared/useFileQueryParam';
 import FilePanel from '@/features/FileSidePanel';
@@ -19,15 +20,11 @@ import Menu from './menu/Menu';
  * Supports ?file=[fileId] query param for file preview modal
  */
 const KnowledgeBaseDetailPage = memo(() => {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useLoaderData() as IdParams;
   const setFileModalId = useSetFileModalId();
 
-  useKnowledgeBaseItem(id!);
-  const name = useKnowledgeBaseStore(knowledgeBaseSelectors.getKnowledgeBaseNameById(id!));
-
-  if (!id) {
-    return <div>Knowledge base ID is required</div>;
-  }
+  useKnowledgeBaseItem(id);
+  const name = useKnowledgeBaseStore(knowledgeBaseSelectors.getKnowledgeBaseNameById(id));
 
   return (
     <>

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/menu/Head.tsx

@@ -15,7 +15,7 @@ const Head = memo<{ id: string }>(({ id }) => {
 
   return (
     <Flexbox gap={8}>
-      <GoBack to="/" />
+      <GoBack to="/knowledge" />
       <Flexbox align={'center'} gap={8} height={36} horizontal>
         <Center style={{ minWidth: 24 }} width={24}>
           <RepoIcon />

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeHome/menu/CategoryMenu.tsx

@@ -93,7 +93,7 @@ const CategoryMenu = memo(() => {
         className={cx(styles.header, isHomeActive && styles.headerActive)}
         horizontal
         onClick={() => {
-          navigate('/', { replace: true });
+          navigate('/knowledge', { replace: true });
         }}
         paddingBlock={6}
         paddingInline={8}
@@ -132,7 +132,7 @@ const CategoryMenu = memo(() => {
             onClick={({ key }) => {
               // Navigate to home route and set category
               const categoryParam = key === FilesTabs.Home ? '' : `?category=${key}`;
-              navigate(`/${categoryParam}`, { replace: true });
+              navigate(`/knowledge${categoryParam}`, { replace: true });
             }}
             selectable
             selectedKeys={[activeKey]}

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeHome/menu/KnowledgeBase.tsx

@@ -37,7 +37,7 @@ const Collection = () => {
   const handleCreate = () => {
     open({
       onSuccess: (id) => {
-        navigate(`/bases/${id}`);
+        navigate(`/knowledge/bases/${id}`);
       },
     });
   };

package/src/app/[variants]/(main)/{_layout/Desktop → layouts/desktop}/DesktopLayoutContainer.tsx

@@ -1,13 +1,14 @@
 import { useTheme } from 'antd-style';
-import { usePathname } from 'next/navigation';
 import { PropsWithChildren, Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { useLocation } from 'react-router-dom';
 
 import SideBar from './SideBar';
 
 const DesktopLayoutContainer = memo<PropsWithChildren>(({ children }) => {
   const theme = useTheme();
-  const pathname = usePathname();
+  const location = useLocation();
+  const pathname = location.pathname;
   const hideSideBar = pathname.startsWith('/settings');
   return (
     <>

package/src/app/[variants]/(main)/{_layout/Desktop → layouts/desktop}/SideBar/BottomActions.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, ActionIconProps } from '@lobehub/ui';
 import { FlaskConical, Github } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -22,16 +22,16 @@ const BottomActions = memo(() => {
   return (
     <Flexbox gap={8}>
       {!hideGitHub && (
-        <Link aria-label={'GitHub'} href={GITHUB} target={'_blank'}>
+        <a aria-label={'GitHub'} href={GITHUB} rel="noopener noreferrer" target={'_blank'}>
           <ActionIcon
             icon={Github}
             size={ICON_SIZE}
             title={'GitHub'}
             tooltipProps={{ placement: 'right' }}
           />
-        </Link>
+        </a>
       )}
-      <Link aria-label={t('labs')} href={'/labs'}>
+      <Link aria-label={t('labs')} to={'/labs'}>
         <ActionIcon
           icon={FlaskConical}
           size={ICON_SIZE}

package/src/app/[variants]/(main)/{_layout/Desktop → layouts/desktop}/SideBar/TopActions.test.tsx

@@ -38,17 +38,16 @@ afterEach(() => {
   cleanup();
 });
 
-vi.mock('next/link', () => ({
-  default: vi.fn(({ children, ...rest }: { children: React.ReactNode; href: string }) => (
-    <div {...rest}>
-      {`Mocked Link ${rest.href}`}
-      {children}
-    </div>
-  )),
+vi.mock('react-router-dom', () => ({
+  useNavigate: vi.fn(() => vi.fn()),
 }));
 
 vi.mock('@lobehub/ui', () => ({
-  ActionIcon: vi.fn(({ title }) => <div>{title}</div>),
+  ActionIcon: vi.fn(({ title, onClick, icon }) => (
+    <div data-testid={`action-icon-${icon?.name || 'unknown'}`} onClick={onClick}>
+      {title}
+    </div>
+  )),
   combineKeys: vi.fn((keys) => keys.join('+')),
   KeyMapEnum: { Alt: 'alt', Ctrl: 'ctrl', Shift: 'shift' },
   Hotkey: vi.fn(({ keys = [] }) => <div>{keys}</div>),
@@ -134,7 +133,8 @@ describe('TopActions', () => {
     const switchBackToChat = vi.spyOn(store.current, 'switchBackToChat');
 
     renderTopActions({ tab: SidebarTabKey.Discover });
-    fireEvent.click(screen.getByText('Mocked Link /chat'));
+    const chatIcon = screen.getByText('tab.chat');
+    fireEvent.click(chatIcon);
 
     expect(switchBackToChat).toBeCalledWith('1');
   });

package/src/app/[variants]/(main)/layouts/desktop/SideBar/TopActions.tsx

@@ -0,0 +1,117 @@
+import { ActionIcon, ActionIconProps, Hotkey } from '@lobehub/ui';
+import { Compass, FolderClosed, MessageSquare, Palette } from 'lucide-react';
+import { memo, useMemo, useTransition } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Flexbox } from 'react-layout-kit';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { SESSION_CHAT_URL } from '@/const/url';
+import { useGlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
+
+const ICON_SIZE: ActionIconProps['size'] = {
+  blockSize: 40,
+  size: 24,
+  strokeWidth: 2,
+};
+
+export interface TopActionProps {
+  isPinned?: boolean | null;
+  tab?: SidebarTabKey;
+}
+
+//  TODO Change icons
+const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
+  const { t } = useTranslation('common');
+  const navigate = useNavigate();
+  const [, startTransition] = useTransition();
+
+  const [switchBackToChat, isMobile] = useGlobalStore((s) => [
+    s.switchBackToChat,
+    s.isMobile,
+  ]);
+  const { showMarket, enableKnowledgeBase, showAiImage } =
+    useServerConfigStore(featureFlagsSelectors);
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.NavigateToChat));
+  const activeSessionId = useSessionStore((s) => s.activeId);
+  const chatHref = useMemo(
+    () => SESSION_CHAT_URL(activeSessionId || INBOX_SESSION_ID, isMobile),
+    [activeSessionId, isMobile],
+  );
+
+  const isChatActive = tab === SidebarTabKey.Chat && !isPinned;
+  const isKnowledgeActive = tab === SidebarTabKey.Knowledge;
+  const isDiscoverActive = tab === SidebarTabKey.Discover;
+  const isImageActive = tab === SidebarTabKey.Image;
+
+  const handleNavigate = (path: string) => {
+    startTransition(() => {
+      navigate(path);
+    });
+  };
+
+  return (
+    <Flexbox gap={8}>
+      <ActionIcon
+        active={isChatActive}
+        icon={MessageSquare}
+        onClick={(e) => {
+          if (e.metaKey || e.ctrlKey) {
+            window.open(chatHref, '_blank');
+            return;
+          }
+          e.preventDefault();
+          startTransition(() => {
+            switchBackToChat(activeSessionId);
+          });
+        }}
+        size={ICON_SIZE}
+        title={
+          <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+            <span>{t('tab.chat')}</span>
+            <Hotkey inverseTheme keys={hotkey} />
+          </Flexbox>
+        }
+        tooltipProps={{ placement: 'right' }}
+      />
+      {enableKnowledgeBase && (
+        <ActionIcon
+          active={isKnowledgeActive}
+          icon={FolderClosed}
+          onClick={() => handleNavigate('/knowledge')}
+          size={ICON_SIZE}
+          title={t('tab.knowledgeBase')}
+          tooltipProps={{ placement: 'right' }}
+        />
+      )}
+      {showAiImage && (
+        <ActionIcon
+          active={isImageActive}
+          icon={Palette}
+          onClick={() => handleNavigate('/image')}
+          size={ICON_SIZE}
+          title={t('tab.aiImage')}
+          tooltipProps={{ placement: 'right' }}
+        />
+      )}
+      {showMarket && (
+        <ActionIcon
+          active={isDiscoverActive}
+          icon={Compass}
+          onClick={() => handleNavigate('/discover')}
+          size={ICON_SIZE}
+          title={t('tab.discover')}
+          tooltipProps={{ placement: 'right' }}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default TopActions;

package/src/app/[variants]/(main)/{_layout/Desktop → layouts/desktop}/index.tsx

@@ -2,15 +2,17 @@
 
 import { useTheme } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { PropsWithChildren, Suspense, memo } from 'react';
+import { Suspense, memo } from 'react';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { Flexbox } from 'react-layout-kit';
+import { Outlet } from 'react-router-dom';
 
 import { isDesktop } from '@/const/version';
 import { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
 import TitleBar, { TITLE_BAR_HEIGHT } from '@/features/ElectronTitlebar';
 import HotkeyHelperPanel from '@/features/HotkeyHelperPanel';
 import { usePlatform } from '@/hooks/usePlatform';
+import { Locales } from '@/locales/resources';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { HotkeyScopeEnum } from '@/types/hotkey';
 
@@ -20,7 +22,8 @@ import SideBar from './SideBar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 
-const Layout = memo<PropsWithChildren>(({ children }) => {
+const Layout = memo((props: { locale: Locales }) => {
+  const { locale } = props;
   const { isPWA } = usePlatform();
   const theme = useTheme();
 
@@ -45,13 +48,15 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
         width={'100%'}
       >
         {isDesktop ? (
-          <DesktopLayoutContainer>{children}</DesktopLayoutContainer>
+          <DesktopLayoutContainer>
+            <Outlet context={{ locale: locale }} />
+          </DesktopLayoutContainer>
         ) : (
           <>
             <Suspense>
               <SideBar />
             </Suspense>
-            {children}
+            <Outlet context={{ locale: locale }} />
           </>
         )}
       </Flexbox>

package/src/app/[variants]/(main)/layouts/index.tsx

@@ -0,0 +1,11 @@
+// Re-export desktop and mobile layouts for external use
+export { default as DesktopMainLayout } from './desktop';
+export { default as MobileMainLayout } from './mobile';
+
+// Re-export desktop components
+export { default as DesktopLayoutContainer } from './desktop/DesktopLayoutContainer';
+export { default as DesktopRegisterHotkeys } from './desktop/RegisterHotkeys';
+export { default as DesktopSideBar } from './desktop/SideBar';
+
+// Re-export mobile components
+export { default as MobileNavBar } from './mobile/NavBar';

package/src/app/[variants]/(main)/{_layout/Mobile → layouts/mobile}/NavBar.tsx

@@ -4,10 +4,10 @@ import { Icon } from '@lobehub/ui';
 import { TabBar, type TabBarProps } from '@lobehub/ui/mobile';
 import { createStyles } from 'antd-style';
 import { Compass, MessageSquare, User } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { MOBILE_TABBAR_HEIGHT } from '@/const/layoutTokens';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
@@ -32,7 +32,7 @@ const NavBar = memo(() => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
   const activeKey = useActiveTabKey();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const { showMarket } = useServerConfigStore(featureFlagsSelectors);
 
@@ -45,7 +45,7 @@ const NavBar = memo(() => {
           ),
           key: SidebarTabKey.Chat,
           onClick: () => {
-            router.push('/chat');
+            navigate('/chat');
           },
           title: t('tab.chat'),
         },
@@ -55,7 +55,7 @@ const NavBar = memo(() => {
           ),
           key: SidebarTabKey.Discover,
           onClick: () => {
-            router.push('/discover');
+            navigate('/discover');
           },
           title: t('tab.discover'),
         },
@@ -65,7 +65,7 @@ const NavBar = memo(() => {
           ),
           key: SidebarTabKey.Me,
           onClick: () => {
-            router.push('/me');
+            navigate('/me');
           },
           title: t('tab.me'),
         },

package/src/app/[variants]/(main)/{_layout/Mobile → layouts/mobile}/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { usePathname } from 'next/navigation';
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import { withSuspense } from '@/components/withSuspense';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
+import { Locales } from '@/locales/resources';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import NavBar from './NavBar';
@@ -22,9 +23,11 @@ const MOBILE_NAV_ROUTES = new Set([
   '/me',
 ]);
 
-const Layout = memo(({ children }: PropsWithChildren) => {
+export const MobileMainLayout = memo((props: { locale: Locales }) => {
+  const { locale } = props;
   const showMobileWorkspace = useShowMobileWorkspace();
-  const pathname = usePathname();
+  const location = useLocation();
+  const pathname = location.pathname;
   const showNav = !showMobileWorkspace && MOBILE_NAV_ROUTES.has(pathname);
 
   const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
@@ -32,12 +35,12 @@ const Layout = memo(({ children }: PropsWithChildren) => {
   return (
     <>
       {showCloudPromotion && <CloudBanner mobile />}
-      {children}
+      <Outlet context={{ locale: locale }} />
       {showNav && <NavBar />}
     </>
   );
 });
 
-Layout.displayName = 'MobileMainLayout';
+MobileMainLayout.displayName = 'MobileMainLayout';
 
-export default withSuspense(Layout);
+export default withSuspense(MobileMainLayout);

package/src/app/[variants]/(main)/profile/(home)/desktop.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+
+import { enableClerk } from '@/const/auth';
+
+import ProfileClient from './Client';
+
+const ClerkProfile = dynamic(() => import('../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+const DesktopProfileHomePage = memo(() => {
+  const mobile = false;
+  return enableClerk ? <ClerkProfile mobile={mobile} /> : <ProfileClient mobile={mobile} />;
+});
+
+DesktopProfileHomePage.displayName = 'DesktopProfileHomePage';
+
+export default DesktopProfileHomePage;

package/src/app/[variants]/(main)/profile/(home)/index.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+
+import { enableClerk } from '@/const/auth';
+
+import ProfileClient from './Client';
+
+const ClerkProfile = dynamic(() => import('../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+const MobileProfileHomePage = memo(() => {
+  const mobile = true;
+  return enableClerk ? <ClerkProfile mobile={mobile} /> : <ProfileClient mobile={mobile} />;
+});
+
+MobileProfileHomePage.displayName = 'MobileProfileHomePage';
+
+export default MobileProfileHomePage;