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

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;

package/src/app/[variants]/(main)/profile/@category/features/CategoryContent.tsx

@@ -1,20 +1,19 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
 import { memo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { ProfileTabs } from '@/store/global/initialState';
 
 import { useCategory } from '../../hooks/useCategory';
 
 const CategoryContent = memo(() => {
-  const pathname = usePathname();
-  const activeTab = pathname.split('/').at(-1);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const activeTab = location.pathname.split('/').at(-1);
   const cateItems = useCategory();
-  const router = useQueryRoute();
 
   return (
     <Menu
@@ -22,8 +21,7 @@ const CategoryContent = memo(() => {
       items={cateItems}
       onClick={({ key }) => {
         const activeKey = key === ProfileTabs.Profile ? '/' : key;
-
-        router.push(urlJoin('/profile', activeKey));
+        navigate(urlJoin('/profile', activeKey));
       }}
       selectable
       selectedKeys={activeTab ? [activeTab] : []}

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

@@ -3,6 +3,7 @@
 import { useResponsive } from 'antd-style';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Outlet } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import Footer from '@/features/Setting/Footer';
@@ -13,7 +14,7 @@ import { LayoutProps } from '../type';
 import Header from './Header';
 import SideBar from './SideBar';
 
-const Layout = memo<LayoutProps>(({ children, category }) => {
+const Layout = memo<Omit<LayoutProps, 'children'>>(({ category }) => {
   const ref = useRef<any>(null);
   const { md = true } = useResponsive();
   const { t } = useTranslation('auth');
@@ -41,7 +42,7 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
             paddingInline: 32,
           }}
         >
-          {children}
+          <Outlet />
         </SettingContainer>
       </Flexbox>
   );

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+
+import Category from '../@category/default';
+import Desktop from './Desktop';
+
+const DesktopProfileWrapper = memo(() => {
+  return <Desktop category={<Category />} />;
+});
+
+DesktopProfileWrapper.displayName = 'DesktopProfileWrapper';
+
+export default DesktopProfileWrapper;

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -14,12 +14,12 @@ import ShareButton from '../../stats/features/ShareButton';
 const Header = memo(() => {
   const { t } = useTranslation('auth');
 
-  const router = useRouter();
+  const navigate = useNavigate();
   const activeSettingsKey = useActiveProfileKey();
   const isStats = activeSettingsKey === 'stats';
 
   const handleBackClick = () => {
-    router.push('/me/profile');
+    navigate('/me/profile');
   };
 
   return (

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

@@ -1,13 +1,14 @@
+import { Outlet } from 'react-router-dom';
+
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
 
-import { LayoutProps } from '../type';
 import Header from './Header';
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = () => {
   return (
     <MobileContentLayout header={<Header />}>
-      {children}
+      <Outlet />
       <div style={{ flex: 1 }} />
       <Footer />
     </MobileContentLayout>

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

@@ -0,0 +1,18 @@
+import NotFound from '@/components/404';
+import { serverFeatureFlags } from '@/config/featureFlags';
+
+import Page from '../../settings/system-agent';
+import Client from './Client';
+
+
+const page = () => {
+  const { showApiKeyManage } = serverFeatureFlags();
+
+  if (!showApiKeyManage) return <NotFound />;
+
+  return <Client />;
+};
+
+Page.displayName = 'ApiKey';
+
+export default page;

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

@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { BadgeCentIcon, ChartColumnBigIcon, KeyIcon, ShieldCheck, UserCircle } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import type { MenuProps } from '@/components/Menu';
@@ -19,7 +19,7 @@ export const useCategory = () => {
       icon: <Icon icon={UserCircle} />,
       key: ProfileTabs.Profile,
       label: (
-        <Link href={'/profile'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile'}>
           {t('tab.profile')}
         </Link>
       ),
@@ -28,7 +28,7 @@ export const useCategory = () => {
       icon: <Icon icon={ShieldCheck} />,
       key: ProfileTabs.Security,
       label: (
-        <Link href={'/profile/security'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/security'}>
           {t('tab.security')}
         </Link>
       ),
@@ -37,7 +37,7 @@ export const useCategory = () => {
       icon: <Icon icon={ChartColumnBigIcon} />,
       key: ProfileTabs.Stats,
       label: (
-        <Link href={'/profile/stats'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/stats'}>
           {t('tab.stats')}
         </Link>
       ),
@@ -46,7 +46,7 @@ export const useCategory = () => {
       icon: <Icon icon={KeyIcon} />,
       key: ProfileTabs.APIKey,
       label: (
-        <Link href={'/profile/apikey'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/apikey'}>
           {t('tab.apikey')}
         </Link>
       ),
@@ -55,7 +55,7 @@ export const useCategory = () => {
       icon: <Icon icon={BadgeCentIcon} />,
       key: ProfileTabs.Usage,
       label: (
-        <Link href={'/profile/usage'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/usage'}>
           {t('tab.usage')}
         </Link>
       ),

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { enableClerk } from '@/const/auth';
+
+const ClerkProfile = dynamic(() => import('../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+const MobileProfileSecurityPage = memo(() => {
+  const mobile = true;
+  return enableClerk ? <ClerkProfile mobile={mobile} /> : <Navigate replace to="/profile" />;
+});
+
+
+const DesktopProfileSecurityPage = memo(() => {
+  const mobile = false;
+  return enableClerk ? <ClerkProfile mobile={mobile} /> : <Navigate replace to="/profile" />;
+});
+
+export { DesktopProfileSecurityPage,MobileProfileSecurityPage };

package/src/app/[variants]/(main)/profile/stats/features/AssistantsRank.tsx

@@ -2,11 +2,11 @@ import { BarList } from '@lobehub/charts';
 import { ActionIcon, Avatar, FormGroup, Modal } from '@lobehub/ui';
 import { MaximizeIcon } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_AVATAR } from '@/const/meta';
@@ -18,7 +18,7 @@ import { SessionRankItem } from '@/types/session';
 export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation(['auth', 'chat']);
-  const router = useRouter();
+  const navigate = useNavigate();
   const { data, isLoading } = useClientDataSWR('rank-sessions', async () =>
     sessionService.rankSessions(),
   );
@@ -86,7 +86,7 @@ export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
               desc: t('stats.empty.desc'),
               title: t('stats.empty.title'),
             }}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.assistantsRank.right')}
           />
         </Flexbox>
@@ -104,7 +104,7 @@ export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
             height={340}
             leftLabel={t('stats.assistantsRank.left')}
             loading={isLoading || !data}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.assistantsRank.right')}
           />
         </Modal>

package/src/app/[variants]/(main)/profile/stats/features/TopicsRank.tsx

@@ -3,11 +3,11 @@ import { ActionIcon, FormGroup, Icon, Modal } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { MaximizeIcon, MessageSquareIcon } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { INBOX_SESSION_ID } from '@/const/session';
@@ -19,7 +19,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation('auth');
   const theme = useTheme();
-  const router = useRouter();
+  const navigate = useNavigate();
   const { data, isLoading } = useClientDataSWR('rank-topics', async () =>
     topicService.rankTopics(),
   );
@@ -73,7 +73,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
               desc: t('stats.empty.desc'),
               title: t('stats.empty.title'),
             }}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.topicsRank.right')}
           />
         </Flexbox>
@@ -91,7 +91,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
             height={340}
             leftLabel={t('stats.topicsRank.left')}
             loading={isLoading || !data}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.topicsRank.right')}
           />
         </Modal>

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import StatsClient from './Client';
+
+const MobileProfileStatsPage = memo(() => {
+  const mobile = true;
+  return <StatsClient mobile={mobile} />;
+});
+
+MobileProfileStatsPage.displayName = 'MobileProfileStatsPage';
+
+
+const DesktopProfileStatsPage = memo(() => {
+  const mobile = false;
+  return <StatsClient mobile={mobile} />;
+});
+
+export { DesktopProfileStatsPage,MobileProfileStatsPage };